<template>
    <div class="page-help">
        <van-nav-bar class="help-tilte" left-arrow :fixed="true" :title="$t('m.Help')" @click-left="$router.back(-1)">
        </van-nav-bar>
        <div style="padding: 23px;"></div>
        <div class="help-title-box">
            <div class="q-pop">
                <img src="../../static/img/images/help-smile1.png" />
                <div class="q-in-box">
                    <div class="q-box">
                        {{$t('m.Question')}}
                    </div>
                </div>
            </div>
            <div class="a-pop">
                <img src="../../static/img/images/help-smile2.png" />
                <div class="a-in-box">
                    <div class="a-box">
                        {{$t('m.Answer')}}
                    </div>
                </div>
            </div>
        </div>
        <div class="help-list" @click="$router.push('/help/how-works')">{{$t('m.HowShopGoGoWorks')}}</div>
        <van-collapse v-model="activeName" accordion>
            <van-collapse-item :title="$t('m.Rulesmanners')" name="1">
                <div class="filter-child-list" @click="$router.push('/help/ad-rules')">{{$t('m.AdRules')}}</div>
                <div class="filter-child-list" @click="$router.push('/help/prohibited-ads')">{{$t('m.ProhibitedAds')}}</div>
                <div class="filter-child-list" @click="$router.push('/help/prohibited-conduct')">{{$t('m.Prohibitedconduct')}}</div>
            </van-collapse-item>
        </van-collapse>
        <div class="help-list" @click="$router.push('/help/ad-fee')" style="border-top: 0 solid transparent;">{{$t('m.Adfee')}}</div>
        <div class="help-list" @click="$router.push('/help/seller-tips')">{{$t('m.Sellertips')}}</div>
        <div class="help-list" @click="$router.push('/help/buyer-tips')">{{$t('m.Buyertips')}}</div>
        <div class="help-list" @click="$router.push('/help/tips-safely')">{{$t('m.Tipsforbuyingandselling')}}</div>
        <div class="help-list" @click="$router.push('/help/how-take-photos')">{{$t('m.Howtotakegoodphotos')}}</div>
        <div class="help-list" @click="$router.push('/help/how-set-price')">{{$t('m.Howtosetaprice')}}</div>
        <div class="help-list" @click="$router.push('/help/why-suspended')">{{$t('m.Whywasmyaccountsuspended')}}</div>
        <div class="help-list" @click="$router.push('/help/why-ad-pending')">{{$t('m.WhywasmyAdpending')}}</div>
        <div class="help-list" @click="$router.push('/help/why-ad-suspended')">{{$t('m.WhywasmyAdsuspended')}}</div>
        <div style="padding: 8px 0;background: #f2f2f2;"></div>
        <div class="help-list" @click="$router.push('/help/terms')">{{$t('m.Termsofuse')}}</div>
        <div class="help-list" @click="$router.push('/help/policy')" style="border-bottom: 1px solid #e5e5e5; margin-bottom: 80px;">{{$t('m.Privacypolicy')}}</div>
    </div>
</template>
<script>
    export default {
        name: 'Help',
        data() {
            return {
                activeName: '1'
            };
        }
    }

</script>
<style>
    .page-help .van-nav-bar{
        background-color: #FF9900;
        color: #fff;
    }
    .page-help .van-nav-bar .van-icon{
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .page-help .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
</style>
<style scoped>
    .help-title-box{
        padding: 8px 5%;
    }
    .q-pop, .a-pop {
        height: 43px;
        position: relative;
    }
    .q-pop img, .a-pop img {
        height: 32px;
        width: 32px;
    }
    .q-pop img {
        position: absolute;
        left: 17%;
        top: 2px;
    }
    .a-pop img {
        position: absolute;
        right: 17%;
        top: 2px;
    }
    .q-in-box{
        position: absolute;
        left: 34%;
        top: 0;
    }
    .q-box{
        position:relative;
        padding: 8px 10px;
        border: 1px solid #9F9F9F;
        border-radius: 5px;
    }
    .q-box:before,.q-box:after{
        content:'';
        width:0;
        height:0;
        position:absolute;
    }
    .q-box:before{
        left: -12px;
        top: 10px;
        border-right: 12px solid #9F9F9F;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    .q-box:after{
        left: -11px;
        top: 10px;
        border-right: 12px solid #fff;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    .a-in-box{
        position: absolute;
        right: 34%;
        top: 0;
    }
    .a-box{
        position:relative;
        padding: 8px 10px;
        border: 1px solid #9F9F9F;
        border-radius: 5px;
    }
    .a-box:before,.a-box:after{
        content:'';
        width:0;
        height:0;
        position:absolute;
    }
    .a-box:before{
        right: -12px;
        top: 10px;
        border-left: 12px solid #9F9F9F;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    .a-box:after{
        right: -11px;
        top: 10px;
        border-left: 12px solid #fff;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    .help-list{
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 8px 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 24px;
        position: relative;
        background-color: #fff;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        border-top: 1px solid #e5e5e5;
    }
    .filter-child-list{
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 8px 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 24px;
        position: relative;
        background-color: #fff;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        /*border-bottom: 1px solid #e5e5e5;*/
    }

</style>
